<template>
  <view class="container">
    <view class="health-header-ul">
      <view class="health-header-ys health-w flex justify-end">
        <view class="diet-selec" @click="showPop('habitRef')">
          <text>{{nowHobit}}</text>
          <text class="lg text-gray cuIcon-right margin-left-xxs"></text>
        </view>
      </view>
      <view class="flex justify-between health-hedaer-progress flex  justify-center align-center">
        <!-- <view class="health-hedaerleft flex flex-direction justify-center">
          <view class="health-hedaerleft-li" v-for="item in heatData" :key="item.id">
            <text class="health-hedaerleft-ts">{{item.title}}</text>
            <progress class="order-d-g-w" :active="true" :percent="item.percent" :activeColor="item.color" duration="20"
              stroke-width="5" />
            <text class="health-hedaerleft-calorie"><text
                class="font-weight">{{item.calorieText}}</text>/{{item.calorie}}</text>
          </view>
        </view> -->
        <view class="health-hedaerRight flex flex-direction justify-center align-center">
          <view class="qiun-charts">
            <qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" canvas2d />
          </view>
          <view class="posi-box" :class="{'posi-box6': heatData.length === 5, 'posi-box7': heatData.length === 6, 'posi-box9': heatData.length === 8}">
            <view class="posi-box-size" v-for="(item,index) in heatData" :key="index" >
              <text class="posi-box-sizeText">{{item.title}}</text>
              <view class="posi-box-sizeTextts"><text>{{item.calorieText}}</text><text>/{{item.calorie}}</text></view>
            </view>
          </view>
          <text class="recommendation">推荐摄入1480</text>
        </view>
      </view>
    </view>
    <view class="health-con-ul health-w marbottom3">
      <view class="dv_ms  p_rlt  margin-top-xs	bg-white">
        <!-- tab标签头 -->
        <view class="nav">
          <view v-for="(item,index) in navList" :key="index" class="navItem d_ib  p_rlt" :class="{act:navClass==index}"
            @click="tabCon(index)">
            <view class="item_cont text-acenter">
              <view class="d_ib">
                <view class="">
                  {{ item.name }}
                </view>
                <view class="text-center rlbox padding-lr-xs">
                  <view class="d_ib line"></view>
                </view>
              </view>
            </view>
            <view v-if="navClass == index" class="trapezoid"></view>
          </view>
        </view>
        <!-- tab切换内容 -->
        <view class="tab-con" v-if="!navClass">
          <view class="tab-con-title flex align-center">
            <text class="textStyle">今日运动</text>
            <text class="icon-bg" v-if="false"><text class="fcon-a-gantan"></text></text>
          </view>
          <view class="tab-con-list flex justify-between align-center">
            <view class="flex justify-between align-end">
              <view class="motion-bgs">
                <view v-if="boxHeight!=100" class="mo_top_box">
                  <view class="mo_top" :style="{background:'#CCEED1'}"></view>
                </view>
                <view class="mo_bottom_box">
                  <view class="mo_bottom" :style="{backgroundColor:boxHeight>0?'#47C974':''}"></view>
                </view>
                <view class="mo_contents">
                  <view class="mo_con_body" :style="{height:boxHeight+'%'}" v-if="boxHeight!=0">
                    <view class="mo_content_top"></view>
                  </view>
                </view>

              </view>
              <!-- <view class="motion-bg">
                <view class="motion-bg-con">
                  <view class="motion-bg-posi" :style="{ height: boxHeight + '%' }">
                    <view><image class="motion-bg-img" src="https://cdn-static.yekjx.com/food/images/hel_bg20.png" mode=""></image></view>
                    <view class="motion-bg-conten"></view>
									
                  </view>
                </view>
              </view> -->
              <!-- <image class="imgStyle" src="https://cdn-static.yekjx.com/food/images/hel_bg15.png" mode=""></image> -->
              <view class="flex flex-direction childtext-con" v-if="weChatMovement">
                <text>120</text>
                <text></text>
                <text>395Kcal</text>
                <text>推荐消耗</text>
              </view>
              <view class="flex flex-direction childtext-con weChatMovement-con" v-if="!weChatMovement">
                <view class="weChatMovement-no">{{stepsNum}}</view>
                <view class="weChatMovement-nobu">步</view>
              </view>
            </view>
            <view class="tab-con-list-cnnter" v-if="weChatMovement">
              <image src="https://cdn-static.yekjx.com/food/images/hel_bg14.png" mode=""></image>
            </view>
            <view class="tab-con-list-last flex flex-direction align-center">
              <text class="fcon-a-zmen" v-if="weChatMovement"></text>
              <view class="flex flex-direction tanSteps" v-if="weChatMovement">
                <text>6000步/2Km</text>
                <text>已走3500步</text>
              </view>
              <view class="flex flex-direction tanStepsjk justify-center align-center" v-if="!weChatMovement">
                <text class="tanStepsjk-text-style ">授权后才能保证更好的健康管理</text>
                <text class="tanStepsjk-btn" @click="weChatMovement=true">去授权</text>
              </view>
            </view>
          </view>
          <view class="recommendation-con">
            <view class="recommendation-title flex justify-between align-end">
              <text>精品推荐</text>
              <text>做个养生项目也可以消耗热量哦</text>
            </view>
            <view class="recommendation-con">
              <view class=" flex justify-between">
                <view class="flex flex-direction recommendation-li align-center" v-for="(item,index) in projectList"
                  :key="index">
                  <image class="recommendation-img" :src="item.imgSrc" mode=""></image>
                  <text>{{ item.text1 }}</text>
                  <text>{{ item.text2 }}</text>
                  <text>{{ item.text3 }}</text>
                </view>
              </view>
              <view class=" flex justify-end m-top-xl ">
                <view class="recommendation-btn">
                  去预约 <view class="rembtn-bg"><text class="fcon-a-jiacar icon-gwce"></text></view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <!-- 消耗卡路里 -->
        <view class="tab-con" v-else>
          <view class="tab-con-title flex align-center">
            <text class="textStyle">健康趋势</text>
            <text class="icon-bg" v-if="false"><text class="fcon-a-gantan"></text></text>
          </view>
          <view class="jkqs-con">
            <view class="qiun-data-charts-con" v-if="weChatMovement">
              <qiun-data-charts type="area" :opts="opts3" :chartData="chartData3" canvas2d />
            </view>
            <view class="flex flex-direction justify-center align-center" v-if="!weChatMovement">
              <image class="jkqu-bg" src="https://cdn-static.yekjx.com/food/images/hel_bg23.png" mode=""></image>
              <text class="tanStepsjk-text-style tanStepsjk-text-stylemartop">授权后才能保证更好的健康管理</text>
              <text class="tanStepsjk-btn tanStepsjk-btnwx flex justify-center align-center"
                @click="weChatMovement=true">去授权</text>
            </view>
          </view>
          <view class="healthRecords-title">
            <text class="textFont">4月10日</text>
          </view>
          <view class="jkqs-ul flex justify-between align-center">
            <view class="jkqs-li flex flex-direction align-center justify-center" v-for="(item,index) in healthQsList"
              :key="index">
              <view class="jkqs-bs">{{ item.text }}</view>
              <view class="flex jksq-flex-1 align-center">
                <text class="jkqs-num">{{item.num}}<text class="jkqs-kluli">{{item.kaluli}}</text> </text>
                <text :class="item.icon" v-if="item.icon" :style="{ color: item.color }"></text>
              </view>
            </view>
          </view>
        </view>
        <!-- 切换内容end -->

      </view>
      <!-- 今日饮食 -->
      <view class="tab-con-titlemar bg-white">
        <view class="line mattb"></view>
        <view class="flex align-center">
          <text class="textStyle">今日饮食</text>
          <text class="icon-bg" v-if="false"><text class="fcon-a-gantan"></text></text>
        </view>
      </view>
      <view class="daydiet bg-white">
        <view class="daydiet-charts">
          <qiun-data-charts type="ring" :opts="opts2" :chartData="chartData2" canvas2d />
        </view>
      </view>
      <!-- 今日饮食end -->
      <!-- 菜品推荐 -->
      <view class="bg-white padding-bottom-xs recommendation-ul recommendation-radius">
        <view class="recommendation-con li-widtht ">
          <view class="recommendation-title flex justify-between">
            <text>菜品推荐</text>
          </view>
          <view class="recommendation-con recommendation-ul">
            <view class=" flex justify-between">
              <view class="flex flex-direction recommendation-li align-center" v-for="(item,index) in menuList"
                :key="index">
                <image class="recommendation-img" :src="item.imgSrc" mode=""></image>
                <text>{{ item.text1 }}</text>
                <text>{{ item.text2 }}</text>
                <text>{{ item.text3 }}</text>
              </view>
            </view>
            <view class=" flex justify-end m-top-xl ">
              <view class="recommendation-btn">
                去点餐 <view class="rembtn-bg"><text class="fcon-a-jiacar icon-gwce"></text></view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 菜品推荐end -->
      <!-- 健康档案 -->
      <view class="healthRecords li-widtht">
        <view class="healthRecords-title flex justify-between">
          <text class="textFont">健康档案</text>
          <text class="fcon-a-edt" @click="toRouter(`/pages/health/healthRecords/healthRecords`)"></text>
        </view>
        <view class="healthRecords-list flex justify-between">
          <view class="healthRecords-li flex flex-direction align-center" v-for="(item,index) in healthList"
            :key="index" :style="{ 'background-image': 'url(' + item.bgSrc + ')' }">
            <view>
              <text class="healthRecords-fw">{{item.text[0]}}</text>
              <text class="healthRecords-fh">{{item.text[2]}}</text>
            </view>
            <view class="healthRecords-b">
              {{item.text[1]}}
            </view>
            <view class="posilix" v-if="item.flag">
              理想
            </view>
          </view>
        </view>
      </view>
      <!-- 健康档案end -->
      <!-- 健康知识 -->
      <view class="healthKnowledge li-widtht">
        <view class="healthRecords-title">
          <text class="textFont">健康知识</text>
        </view>
        <view class="healthKnowledge-ul bg-white">
          <view class="healthKnowledge-li flex align-center"
            @click="toRouter(`/pages/health/healthKnowledge/healthKnowledge?imgSrc=${item.imgSrc}`)"
            v-for="(item,index) in healthKList" :key="index">
            <image class="healthKnowledgeimgStyle" :src="item.imgSrc" mode=""></image>
            <text class="healthfont-style">{{ item.text }} </text>
          </view>
          <view class="addclick" v-if="false">
            <tecxt class="cuIcon-add"></tecxt>
          </view>
        </view>
      </view>
      <!-- 健康知识 end-->
    </view>
    <!-- 饮食习惯弹窗 -->
    <habit ref="habitRef" @choseTase="choseTase" />
    <!-- 健康档案 -->
    <uni-popup ref="popupHealth" class="uni-propun-con" zindex>
      <view class="popup-content">
        <view class="uni-dialogCon">
          <view class="belivery-title">设置健康档案</view>
          <view class="popupEmil-input-text">
            <text>无健康档案，首次使用请设置身高、体重等数据，以优化管理效果。</text>
          </view>
          <view class="popupEmil-btn flex justify-between align-center">
            <view @click="hidePop">跳过</view>
            <view @click="tapSure">好的</view>
          </view>
        </view>
      </view>
    </uni-popup>

  </view>
</template>

<script lang="ts" setup>
  import { ref } from "vue"
  import { onLoad } from '@dcloudio/uni-app'
  // import qiunDataCharts from 'qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
  // import qiunDataCharts from '../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
  import habit from '@/components/comhabit/habit.vue' //饮食习惯弹窗
  const navClass = ref(0) //tab选项卡
  const habitRef = ref()  ////饮食习惯弹窗
  const nowHobit = ref("地中海饮食") //饮食习惯弹窗
  const popupHealth = ref() //健康档案弹窗
  const nohealth = ref(null)  //是否有健康档案
  const weChatMovement = ref(null)
  const boxHeight = ref(60) //运动百分比

  // height: 183rpx;
  const stepsNum = ref(2500) //步数
  // import { onReady } from '@dcloudio/uni-app'
  // onShow(() => {})
  const healthKList = ref([
    {
      id: 0,
      text: '减肥期间不能吃哪些水果？',
      imgSrc: 'https://cdn-static.yekjx.com/food/images/hel_bg06.png'
    },
    {
      id: 1,
      text: '16+8真的能瘦吗？',
      imgSrc: 'https://cdn-static.yekjx.com/food/images/hel_bg07.png'
    },
    {
      id: 2,
      text: '如何提升基础代谢？',
      imgSrc: 'https://cdn-static.yekjx.com/food/images/hel_bg13.png'
    }
  ])
  // 饮食图表
  const chartData2 = ref({
    series: [
      {
        data: [{ "name": "早餐", "value": 50 }, { "name": "中餐", "value": 30 }, { "name": "晚餐", "value": 20 }]
      }
    ]
  })
  const opts2 = ref({
    rotate: false,
    rotateLock: false,
    color: ["#FE9B96", "#FEC984", "#8DE0C4", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
    padding: [5, 5, 5, 5],
    dataLabel: false,
    enableScroll: false,
    legend: {
      show: true,
      position: "right",
      lineHeight: 25,
    },
    title: {
      name: "1381",
      fontSize: 48,
      color: "#53A87F"
    },
    subtitle: {
      name: "Kcal",
      fontSize: 28,
      color: "#C1C1C1"
    },
    extra: {
      ring: {
        ringWidth: 25,
        activeOpacity: 0.5,
        activeRadius: 10,
        offsetAngle: 0,
        labelWidth: 15,
        border: false,
        borderWidth: 3,
        borderColor: "#FFFFFF"
      }
    }
  })

  // 健康趋势图表
  const chartData3 = ref({
    categories: ["1", "2", "3", "4", "5", "6", "7", "8", "9"],
    series: [
      {
        name: "体重",
        data: [35, 8, 25, 37, 4, 20, 35, 8, 25]
      },
      {
        name: "步数",
        data: [70, 40, 65, 100, 44, 68, 70, 40, 65]
      },
      {
        name: "卡路里",
        data: [100, 80, 95, 150, 112, 132, 100, 80, 95]
      }
    ]
  })
  const opts3 = ref({
    color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
    enableScroll: false,
    legend: {},
    xAxis: {
      disableGrid: true
    },
    yAxis: {
      gridType: "dash",
      dashLength: 2
    },
    extra: {
      area: {
        type: "curve",
        opacity: 0.2,
        addLine: true,
        width: 2,
        gradient: true,
        activeType: "hollow"
      }
    }
  })
  //卡路里图表

  const chartData = ref({
    series: [
      {
        name: "Kcal",
        color: "#5DB075",
        data: 0.8
      }
    ]
  })
  const opts = ref({
    color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
    padding: undefined,
    title: {
      name: '1381',
      fontSize: 40,
      color: '#333',
      fontWeight: 400
    },
    subtitle: {
      name: '蛋白质(g)',
      fontSize: 15,
      color: '#53A87F',
      offsetY:20,
    },
    extra: {
      arcbar: {
        type: "default",
        width: 15,
        backgroundColor: "#E9E9E9",
        startAngle: 0.75,
        endAngle: 0.25,
        gap: 2,
        linearType: "none",
        // radius: 260
      }
    }
  })
  const navList = ref([
    {
      name: '今日任务',
      id: '0'
    },
    {
      name: '30天趋势',
      id: '1'
    }
  ])

  const healthQsList = ref([
    {
      id: 0,
      text: "步数",
      icon: 'fcon-a-flow',
      num: '9852',
      color: '#87CAA9',
    },
    {
      id: 1,
      text: "卡路里",
      icon: 'fcon-a-up',
      color: '#FF837C',
      num: '2100',
      kaluli: 'Kcal'
    },
    {
      id: 2,
      text: "体重",
      num: '48.9',
      color: '#87CAA9',
      kaluli: 'Kg'
    }
  ])

  const healthList = ref([
    {
      id: 0,
      text: ['160', '身高', 'cm'],
      bgSrc: 'https://cdn-static.yekjx.com/food/images/hel_bg03.png',
      flag: false,
    },
    {
      id: 1,
      text: ['160', '体重', 'KG'],
      bgSrc: 'https://cdn-static.yekjx.com/food/images/hel_bg02.png',
      flag: false,
    },
    {
      id: 2,
      text: ['160', '基础代谢', 'Kcal'],
      bgSrc: 'https://cdn-static.yekjx.com/food/images/hel_bg01.png',
      flag: false,
    },
    {
      id: 3,
      text: ['160', 'BMI'],
      bgSrc: 'https://cdn-static.yekjx.com/food/images/hel_bg04.png',
      flag: true,
    }
  ])
  const heatData = ref([
    {
      id: 0,
      title: '碳水',
      calorieText: '64',
      calorie: '60g',
    },
    {
      id: 1,
      title: '脂肪',
      calorieText: '365',
      calorie: '226g',
    },
    {
      id: 2,
      title: '钙',
      calorieText: '4.5',
      calorie: '16g',
    },
    {
      id: 3,
      title: '维C',
      calorieText: '21.2',
      calorie: '24g',
    },
    {
      id: 4,
      title: '膳食纤维',
      calorieText: '7',
      calorie: '7.5g',
    },
    {
      id: 5,
      title: '盐量',
      calorieText: '3.1',
      calorie: '2g',
    },
    {
      id: 6,
      title: '维A',
      calorieText: '3.1',
      calorie: '2g',
    },
    {
      id: 7,
      title: '食物多样',
      calorieText: '9',
      calorie: '6g',
    }
  ])
  
  const heatData7 = ref([
    {
      id: 0,
      title: '碳水',
      calorieText: '64',
      calorie: '60g',
    },
    {
      id: 1,
      title: '脂肪',
      calorieText: '365',
      calorie: '226g',
    },
    {
      id: 3,
      title: '维C',
      calorieText: '21.2',
      calorie: '24g',
    },
    {
      id: 4,
      title: '膳食纤维',
      calorieText: '7',
      calorie: '7.5g',
    },
    {
      id: 5,
      title: '盐量',
      calorieText: '3.1',
      calorie: '2g',
    },
    {
      id: 7,
      title: '食物多样',
      calorieText: '9',
      calorie: '6g',
    }
  ])
  
  const heatData6 = ref([
    {
      id: 0,
      title: '碳水',
      calorieText: '64',
      calorie: '60g',
    },
    {
      id: 3,
      title: '维C',
      calorieText: '21.2',
      calorie: '24g',
    },
    {
      id: 4,
      title: '膳食纤维',
      calorieText: '7',
      calorie: '7.5g',
    },
    {
      id: 5,
      title: '盐量',
      calorieText: '3.1',
      calorie: '2g',
    },
    {
      id: 7,
      title: '食物多样',
      calorieText: '9',
      calorie: '6g',
    }
  ])
  
  const projectList = ref([
    {
      id: 0,
      imgSrc: 'https://cdn-static.yekjx.com/food/images/hel_bg05.png',
      text1: '艾灸/60分钟',
      text2: '300Kcal',
      text3: '¥218.00',
    },
    {
      id: 1,
      imgSrc: 'https://cdn-static.yekjx.com/food/images/hel_bg09.png',
      text1: '足浴/60分钟',
      text2: '56Kcal',
      text3: '¥238.00',
    },
    {
      id: 2,
      imgSrc: 'https://cdn-static.yekjx.com/food/images/hel_bg08.png',
      text1: 'SPA/60分钟',
      text2: '235Kcal',
      text3: '¥358.00',
    }

  ])

  const menuList = ref([
    {
      id: 0,
      imgSrc: 'https://cdn-static.yekjx.com/food/images/hel_bg12.png',
      text1: '鲜玉米',
      text2: '103Kcal',
      text3: '¥5.00/1根',
    },
    {
      id: 1,
      imgSrc: 'https://cdn-static.yekjx.com/food/images/hel_bg11.png',
      text1: '酸汤黑鱼片',
      text2: '322Kcal',
      text3: '¥14.00/200g',
    },
    {
      id: 2,
      imgSrc: 'https://cdn-static.yekjx.com/food/images/hel_bg10.png',
      text1: '西蓝花虾仁',
      text2: '75Kcal',
      text3: '¥12.00/150g',
    }

  ])
  const tabCon = (index : any) => {
    navClass.value = index
  }
  const copyData = JSON.parse(JSON.stringify(heatData.value))
  const choseTase = (item : any) => {
    nowHobit.value = item.ties
    if(nowHobit.value === '口味'){
      heatData.value = heatData7.value
    }else if(nowHobit.value === '地中海饮食'){
       heatData.value = copyData
    } else if(nowHobit.value === '减脂'){
      heatData.value = heatData6.value
    }
    uni.setStorageSync("hib", { hibName: item.ties })

  }

  const showPop = (source : string) => {
    switch (source) {
      case 'habitRef':
        habitRef.value?.open()//饮食习惯弹窗
        break;
      case 'popupHealth':
        popupHealth.value?.open('center')//设置健康档案
        break;
      default:
        break;
    }
  }

  const toRouter = (url) => {
    uni.navigateTo({
      url
    })
  }

  onLoad(() => {
    console.log('456')
    nohealth.value = uni.getStorageSync('nohealth')
    if (!nohealth.value) {
      setTimeout(() => {
        showPop("popupHealth")
      }, 500)
    }
  })

  //跳过
  const hidePop = () => {
    popupHealth.value?.close()
  }
  const tapSure = () => {
    uni.navigateTo({
      url: '/pages/health/healthRecords/healthRecords'
    })
    popupHealth.value?.close()
  }
</script>

<style lang="scss">
  page {
    background-color: #F6F6F6 !important;
  }
  .posi-box{
    .posi-box-size {
      border-bottom: 1px solid #B6E6C7;
      width: 130rpx;
      padding-bottom: 5rpx;
      position: absolute;
      text-align: right;
      .posi-box-sizeText {
        color: #53A87F;
        font-size: 24rpx;
        font-weight: 400;
        margin-top: 10rpx;
      }

      .posi-box-sizeTextts {
        text {
          &:last-child {
            color: rgba(83, 168, 127, 0.70);
            font-size: 24rpx;
            font-weight: 400;
            margin-left:5rpx;
          }

          &:first-child {
            color: #333;
            font-size: 28rpx;
            font-weight: 400;
          }
        }
      }
    }
  }
  .posi-box7{
    .posi-box-size {
      &:nth-child(1){
        left: 60rpx;
        top: 40rpx;
      }
      &:nth-child(2){
        top:182rpx;
        left: 16rpx;
      }
      &:nth-child(3){
        top:330rpx;
        left: 60rpx;
      }
      &:nth-child(4){
        right: 60rpx;
        top: 40rpx;
        text-align: left;
      }
      &:nth-child(5){
        top:182rpx;
        right: 16rpx;
        text-align: left;
      }
      &:nth-child(6){
        top:330rpx;
        right: 60rpx;
        text-align: left;
      }
    }
  }
  
  .posi-box9{
    .posi-box-size {
      &:nth-child(1){
        left: 60rpx;
        top: 40rpx;
      }
      &:nth-child(2){
        top:140rpx;
        left: 16rpx;
      }
      &:nth-child(3){
        top:242rpx;
        left: 20rpx;
      }
      &:nth-child(4){
        left: 60rpx;
        top: 343.6rpx;
      }
      &:nth-child(5){
        right: 60rpx;
        top: 40rpx;
        text-align: left;
      }
      &:nth-child(6){
       top:140rpx;
       right: 16rpx;
       text-align: left;
      }
      &:nth-child(7){
        top:242rpx;
        right: 20rpx;
        text-align: left;
      }
      &:nth-child(8){
        right: 60rpx;
        top: 343.6rpx;
        text-align: left;
      }
    }
  }
  
  .posi-box6{
    .posi-box-size {
      &:nth-child(1){
        left: 60rpx;
        top: 40rpx;
      }
      &:nth-child(2){
        top:343.6rpx;
        left: 46rpx;
      }
      &:nth-child(3){
       right: 60rpx;
       top: 40rpx;
       text-align: left;
      }
      &:nth-child(4){
        right: 16rpx;
        top: 200rpx;
        text-align: left;
      }
      &:nth-child(5){
        right: 60rpx;
        top: 349.63rpx;
        text-align: left;
      }
    }
  }

  .tanStepsjk-text-stylemartop {
    margin-top: -100rpx;
  }

  .marbottom3 {
    padding-bottom: 30rpx;
  }

  .jkqu-bg {
    width: 100%;
    height: 212rpx;
    // background-image: url('');
    // background-size:cover;
  }

  .tanStepsjk-btn {
    width: 178.81rpx;
    height: 57rpx;
    flex-shrink: 0;
    border-radius: 98rpx;
    background: #53A87F;
    color: #FFF;
    font-size: 32rpx;
    font-weight: 700;
    line-height: 57rpx;
    /* 24px */
  }

  .tanStepsjk-btnwx {
    width: 220rpx;
    height: 70.608rpx;
    margin-top: 32rpx;
    line-height: 70.608rpx;
  }

  .qiun-data-charts-con {
    padding-top: 20rpx;
  }

  .jkqs-ul {
    height: 242rpx;
    flex-shrink: 0;
    border-radius: 10px;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0.00) 2.97%, #F6F7FB 38.51%);

    .jkqs-li {
      flex: 1;

      .jkqs-num {
        color: #333;
        font-feature-settings: 'clig' off, 'liga' off;
        font-family: "Microsoft YaHei UI";
        font-size: 40rpx;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        /* 105% */
      }

      .fcon-a-flow {
        font-size: 24rpx;
        color: #87CAA9;
        margin-left: 5rpx;
      }

      .jkqs-kluli {
        color: #999;
        font-feature-settings: 'clig' off, 'liga' off;
        font-family: "Microsoft YaHei UI";
        font-size: 24rpx;
        font-style: normal;
        font-weight: 400;
        margin-left: 5rpx;
      }

      .jkqs-bs {
        color: #999;
        font-feature-settings: 'clig' off, 'liga' off;
        font-family: "Microsoft YaHei UI";
        font-size: 28rpx;
        font-style: normal;
        font-weight: 400;
        margin-bottom: 36rpx;
      }
    }
  }

  .icon-bg {
    display: flex;
    background-color: #F6F7FB;
    border-radius: 50%;
    margin-left: 20rpx;
    width: 42rpx;
    height: 42rpx;
    align-items: center;
    justify-content: center;

    .fcon-a-gantan {
      font-size: 32rpx;
      color: #999999;
    }
  }

  .health-w {
    width: 700rpx;
    margin: 0 auto;
  }

  .fcon-a-zmen {
    font-size: 50rpx;
    color: #8E8A9F;
  }

  .mattb {
    margin-bottom: 30rpx;
  }

  .icon-gwce {
    color: #53A87F;
    font-size: 38rpx;
  }

  .line {
    width: 620rpx;
    height: 1px;
    background: rgba(246, 247, 251, 0.70);
  }

  .tab-con-titlemar {
    overflow: hidden;
    padding: 0 20rpx 0 40rpx;

    .textStyle {
      color: #333;
      text-align: center;
      font-family: "Microsoft YaHei UI";
      font-size: 32rpx;
      font-style: normal;
      font-weight: 400;
      line-height: 14px;
      /* 87.5% */
    }

    .fcon-tixing {
      background-color: #F6F7FB;
      margin-left: 10rpx;
    }
  }

  .healthRecords-title {
    padding: 20rpx 0;

    .textFont {
      color: #333;
      font-feature-settings: 'clig' off, 'liga' off;
      font-family: "Microsoft YaHei UI";
      font-size: 32rpx;
      font-style: normal;
      font-weight: 700;
      line-height: 150%;
      /* 24px */
    }

    .fcon-a-edt {
      font-size: 40rpx;
      color: #9B97AD;
    }
  }

  .healthKnowledge-ul {
    border-radius: 16rpx;
    padding: 30rpx 30rpx 20rpx 30rpx;
    position: relative;
	filter: drop-shadow(0px -1px 10px rgba(0, 71, 112, 0.15));

    .addclick {
      width: 112rpx;
      height: 112rpx;
      flex-shrink: 0;
      background-color: #53A87F;
      fill: #53A87F;
      filter: drop-shadow(0px 4px 20px rgba(0, 71, 112, 0.20));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      right: 20rpx;
      bottom: 30rpx;

      .cuIcon-add {
        font-size: 50rpx;
        color: #fff;
      }
    }

    .healthKnowledge-li {
      margin-bottom: 30rpx;

      .healthfont-style {
        color: #333;
        font-feature-settings: 'clig' off, 'liga' off;
        font-family: "Microsoft YaHei UI";
        font-size: 32rpx;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
        /* 24px */
      }
    }

    .healthKnowledgeimgStyle {
      width: 120rpx;
      height: 120rpx;
      border-radius: 10rpx;
      margin-right: 42rpx;
    }
  }

  .healthRecords {
    .healthRecords-li {
      width: 154.66rpx;
      height: 150rpx;
      flex-shrink: 0;
      border-radius: 16rpx;
      background: #FFF;
      align-items: center;
      justify-content: center;
      background-size: cover;
      position: relative;

      .posilix {
        position: absolute;
        right: 0;
        top: 0;
        border-radius: 8px 0px;
        width: 82rpx;
        height: 34rpx;
        flex-shrink: 0;
        color: #FFF;
        font-feature-settings: 'dlig' on;
        font-family: "Microsoft YaHei UI";
        font-size: 28rpx;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
        /* 16.8px */
        background: linear-gradient(180deg, #C7E8D9 0%, #A6E7C7 100%);
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .healthRecords-fw {
        color: #333;
        font-feature-settings: 'dlig' on;
        font-family: "Microsoft YaHei UI";
        font-size: 40rpx;
        font-style: normal;
        font-weight: 700;
        line-height: 120%;
        /* 24px */
      }

      .healthRecords-fh {
        color: #999;
        font-feature-settings: 'dlig' on;
        font-family: "Microsoft YaHei UI";
        font-size: 24rpx;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
        /* 14.4px */
        margin-left: 5rpx;
      }

      .healthRecords-b {
        color: #333;
        text-align: center;
        font-family: "Microsoft YaHei UI";
        // font-size: 24rpx;
        font-style: normal;
        font-weight: 400;
        // line-height: 24px;
        /* 200% */
        margin-top: 10rpx;
      }
    }
  }

  .tab-con-title {
    padding: 30rpx 0 0 20rpx;

    .textStyle {
      color: #333;
      text-align: center;
      font-family: "Microsoft YaHei UI";
      font-size: 32rpx;
      font-style: normal;
      font-weight: 400;
      line-height: 14px;
      /* 87.5% */
    }

    .fcon-tixing {
      background-color: #F6F7FB;
      margin-left: 10rpx;
    }
  }

  .li-widtht {
    width: 658.162rpx;
    margin: 20rpx auto !important;
  }

  .recommendation-ul {
    overflow: hidden;
  }

  .recommendation-radius {
    border-radius: 0 0 16rpx 16rpx;
  }

  .recommendation-con {
    margin: 20rpx 0;
    border-radius: 20rpx;
    background: #F6F7FB;
    padding: 0 20rpx 3rpx 20rpx;

    .recommendation-btn {
      width: 184rpx;
      height: 60rpx;
      flex-shrink: 0;
      border-radius: 20px;
      border: 1px solid #53A87F;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #53A87F;
      text-align: justify;
      font-size: 28rpx;
      line-height: 150%;

      /* 18px */
      .rembtn-bg {
        width: 60rpx;
        height: 42rpx;
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 20px;
        background: #EBFFE2;
        margin-left: 10rpx;
      }
    }

    .recommendation-li {
      width: 181.824rpx;
      flex-shrink: 0;
      border-radius: 26rpx;
      background: #FFF;
      padding: 26rpx 0;

      text {
        font-family: "Microsoft YaHei UI";
        font-size: 28rpx;
        font-style: normal;
        font-weight: 400;
        line-height: normal;

        &:nth-child(2) {
          margin: 14rpx 0 8rpx 0;
          color: #333;
        }

        &:nth-child(3) {
          color: #666;
        }

        &:nth-child(4) {
          color: #999;
          margin-top: 8rpx;
        }
      }

      .recommendation-img {
        width: 84rpx;
        height: 84rpx;
        border-radius: 6px;
        border: 0.5px solid rgba(0, 0, 0, 0.05);
      }
    }

    .recommendation-title {
      padding: 25rpx 0 0 10rpx;

      text {
        &:nth-child(1) {
          color: #333;
          font-feature-settings: 'clig' off, 'liga' off;
          font-family: "Microsoft YaHei UI";
          font-size: 32rpx;
          font-style: normal;
          font-weight: 400;
          line-height: 150%;
          /* 24px */
        }

        &:nth-child(2) {
          color: #999;
          font-feature-settings: 'clig' off, 'liga' off;
          font-family: "Microsoft YaHei UI";
          font-size: 24rpx;
          font-style: normal;
          font-weight: 400;
          line-height: 21px;
          /* 175% */
        }
      }
    }
  }

  .tab-con {
    width: 658.162rpx;
    margin: 0 auto;

    .tab-con-list {
      padding-top: 20rpx;
      padding-left: 30rpx;

      .motion-bgs {
        width: 68rpx;
        height: 190rpx;
        position: relative;
        background-color: #EBFFE2;
        overflow: hidden;

        .mo_top_box {
          width: 68rpx;
          height: 40rpx;
          background-color: #fff;
          position: absolute;
          top: 0;
          left: 0;
          border-radius: 0rpx 0rpx 40rpx 40rpx;
          z-index: 10;

          .mo_top {
            width: 68rpx;
            height: 40rpx;
            border-radius: 50%;
            background-color: #CCEED1;
          }
        }

        .mo_bottom_box {
          width: 68rpx;
          height: 40rpx;
          background-color: #fff;
          position: absolute;
          bottom: 0;
          left: 0;
          z-index: 10;
          border-radius: 40rpx 40rpx 0rpx 0rpx;

          .mo_bottom {
            width: 68rpx;
            height: 40rpx;
            border-radius: 50%;
            background-color: #CCEED1;
          }
        }

        .mo_contents {
          width: 68rpx;
          position: absolute;
          bottom: 20rpx;
          left: 0;
          z-index: 2;
          height: calc(100% - 20rpx);
          border-radius: 40rpx;

          // background-color:#44C771;
          .mo_con_body {
            width: 68rpx;
            background-color: #44C771;
            border-radius: 40rpx 40rpx 0rpx 0rpx;
            position: absolute;
            left: 0;
            bottom: 0;

            .mo_content_top {
              width: 68rpx;
              height: 40rpx;
              border-radius: 46%;
              background: linear-gradient(180deg, #6DF49C 0%, #2CAC58 100%);
            }
          }
        }
      }

      .motion-bg {
        background-image: url('https://cdn-static.yekjx.com/food/images/hel_bg19.png');
        width: 68rpx;
        height: 190rpx;
        flex-shrink: 0;
        background-size: cover;

        // overflow: hidden;
        .motion-bg-con {
          position: relative;
          // height: 80%;
          height: 190rpx;
        }

        .motion-bg-posi {
          position: absolute;
          bottom: 0;
          // height: 80%;
        }

        .motion-bg-conten {
          width: 68rpx;
          background: linear-gradient(180deg, #8DD3B1 0%, #41C46E 100%);
          // background-color: red;
          height: 100%;
          border-radius: 0 0 30rpx 30rpx;
        }

        .motion-bg-img {
          width: 68rpx;
          height: 30rpx;
          position: absolute;
          vertical-align: buttom;
          top: -15rpx;
        }
      }

      .weChatMovement-con {
        margin-bottom: 10rpx;
        flex-direction: row;
      }

      .weChatMovement-no {
        color: #53A87F;
        text-align: center;
        font-family: "Microsoft YaHei UI";
        font-size: 40rpx;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        /* 120% */
      }

      .weChatMovement-nobu {
        color: #C1C1C1;
        text-align: center;
        font-family: "Microsoft YaHei UI";
        font-size: 24rpx;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        /* 200% */
        margin-left: 12rpx;
      }

      .tab-con-list-cnnter {
        image {
          width: 164rpx;
          height: 150rpx;
          flex-shrink: 0;
          margin-top: 25rpx;
          margin-left: -10rpx;
        }
      }

      .tanStepsjk {
        width: 264rpx;
        text-align: center;
        margin-right: 40rpx;

        .tanStepsjk-text-style {
          color: #666;
          text-align: center;
          font-family: "Microsoft YaHei UI";
          font-size: 28rpx;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          margin-bottom: 26rpx;
          margin-top: -50rpx;
        }
      }

      .tanSteps {
        width: 244rpx;
        padding: 18rpx 20rpx 15rpx 20rpx;
        border-radius: 10px;
        background: linear-gradient(0deg, rgba(255, 255, 255, 0.00) 2.97%, #F6F7FB 70.32%);
        flex-shrink: 0;
        margin-top: 10rpx;

        text {
          &:nth-child(1) {
            color: #272755;
            text-align: center;
            font-family: "Microsoft YaHei UI";
            font-size: 32rpx;
            font-style: normal;
            font-weight: 400;
            line-height: 24px;
            /* 150% */
          }

          &:nth-child(2) {
            color: #B6B6D4;
            text-align: center;
            font-family: "Microsoft YaHei UI";
            font-size: 24rpx;
            font-style: normal;
            font-weight: 400;
            line-height: 24px;
            /* 200% */
            margin-top: 10rpx;
          }
        }
      }

      .childtext-con {
        margin-left: 20rpx;

        text {
          text-align: left;

          &:nth-child(1) {
            color: #53A87F;
            font-family: "Microsoft YaHei UI";
            font-size: 20px;
            font-style: normal;
            font-weight: 400;
            line-height: 24px;
            /* 120% */
          }

          &:nth-child(2) {
            width: 4rpx;
            height: 35rpx;
            background-color: #C1C1C1;
            transform: rotate(20deg) translateX(10px);
          }

          &:nth-child(3) {
            color: #C1C1C1;
            font-family: "Microsoft YaHei UI";
            font-size: 28rpx;
            font-style: normal;
            font-weight: 400;
            line-height: 24px;
            /* 171.429% */
            margin: 10rpx 0 10rpx -10rpx;
          }

          &:nth-child(4) {
            color: #C1C1C1;
            font-family: "Microsoft YaHei UI";
            font-size: 28rpx;
            font-style: normal;
            font-weight: 400;
            line-height: 24px;
            /* 200% */
            margin-left: -10rpx;
          }
        }
      }
    }

    .imgStyle {
      width: 86rpx;
      height: 246rpx;
    }
  }

  .health-hedaer-progress {
    .health-hedaerRight {
      width: 100%;
      padding: 90rpx 0 0rpx;
      position: relative;
      .recommendation {
       color: #53A87F;
       text-align: center;
       font-size: 28rpx;
       font-weight: 400;
       line-height: 21px; /* 150% */
       margin-top: -20rpx;
      }

      .qiun-charts {
        width: 100%;
        position: relative;
        z-index: 9;
        height: 300rpx;
      }
    }

    .health-hedaerleft {
      .health-hedaerleft-calorie {
        color: #53A87F;
        font-family: "Microsoft YaHei UI";
        font-size: 28rpx;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
      }

      .font-weight {
        font-weight: 700;
      }

      .health-hedaerleft-li {
        margin-bottom: 40rpx;
      }

      .order-d-g-w {
        margin: 10rpx 0;
      }

      .health-hedaerleft-ts {
        color: #53A87F;
        font-family: "Microsoft YaHei UI";
        font-size: 28rpx;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
      }
    }
  }

  .health-header-ul {
    padding: 20rpx 0;
    width: 100%;
    height: 800rpx;
    background: linear-gradient(180deg, #B9F9DE, #EFFFEB 51%, #FAFDFE 100%);

    .health-header-ys {
      .cuIcon-right {
        color: #53A87F;
      }

      .diet-selec {
        color: #53A87F;
        font-family: "Microsoft YaHei UI";
        font-size: 28rpx;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
      }
    }
  }

  .health-con-ul {
    border-radius: 0 0 20rpx 20rpx;
    margin-top: -240rpx;
    margin-bottom: 60rpx;
  }

  // tab切换
  .dv_ms {
    width: 700rpx;
    margin: 0 auto;
    border-radius: 16rpx 16rpx 0 0;
    padding-bottom: 20rpx;
	filter: drop-shadow(0px -1px 10px rgba(0, 71, 112, 0.15));
    // box-shadow: 0px 2px 12rpx 0px rgba(0, 0, 0, 0.05);

    // padding: 20rpx 20rpx 20rpx 150rpx;
    .nav {
      // background: linear-gradient(180deg, #B5D5FF 0%, #FFF 86%);
      border-radius: 10px 10px 0px 0px;
      // background: linear-gradient(180deg, rgba(9, 236, 141, 0.30) 50.89%, rgba(255, 255, 255, 0.8) 78.17%);
      background: linear-gradient(to bottom, #B5F9DD, #E1FDF1);
      color: #999;
      // font-feature-settings: 'clig' off, 'liga' off;
      // font-family: "Microsoft YaHei UI";
      font-size: 28rpx;
      font-style: normal;
      // font-weight: 400;
      line-height: 150%;
      /* 21px */
    }
  }

  .navItem {
    width: 50%;
    height: 68rpx;
    z-index: 1;

    .rlbox {
      height: 7rpx;
    }

    .line {
      margin-top: -6rpx;
      width: 0;
      height: 10rpx;
      border-radius: 10rpx;
      // border-radius: 36px;
      background: linear-gradient(99deg, rgba(4, 171, 51, 0.30) 18.36%, rgba(255, 255, 255, 0.30) 93.22%);
      // background: linear-gradient(90deg, #3489F7 -1.77%, rgba(217, 217, 217, 0.00) 102.56%);
    }

    &:nth-last-child(1) {

      .trapezoid {
        right: 0;
        transform-origin: bottom right;
      }
    }

    &:nth-child(1) {
      .trapezoid {
        left: 0;
        transform-origin: bottom left;
      }
    }

    &.act {
      .item_cont {
        color: $base-color;
        font-size: 32rpx;
        font-weight: 700;
        top: -6rpx;
        transition: all 0.1s ease-out;
      }

      .line {
        transition: width 0.1s ease-out;
        width: 100%;
      }
    }
  }

  .item_cont {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    // padding: 26rpx 0;
  }

  .trapezoid {
    position: absolute;
    right: 1rpx;
    top: -22rpx;
    z-index: 2;
    background-color: #fff;
    width: 100%;
    height: 90rpx;
    /* 宽高 */
    border-radius: 20rpx 20rpx 0 0;
    /* 设置圆角 */
    transform: perspective(110rpx) scale(1.1, 1.1) rotateX(15deg);
    /* 镜头距离元素表面的位置为8px，x轴为1.1倍y轴为1.3倍，绕x轴旋转5度 */
    // transform-origin: bottom center;
    /* bottom left = left bottom = 0 100% 中心点偏移量*/
    border: 1px solid #fff;
    // outline: 1px solid transparent;
    overflow: hidden;
    /* 边框 */
  }

  // tab切换end

  // 弹出层
  .popup-content {
    background-color: #fff;
    border-radius: 16rpx;
    width: 530rpx;
    padding-bottom: 40rpx;
    flex-shrink: 0;

    .uni-dialogCon {
      .belivery-title {
        color: #000;
        font-family: "Microsoft YaHei UI";
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        display: flex;
        justify-content: center;
        padding: 30rpx 0;
      }

      .popupEmil-input-text {
        display: flex;
        width: 450rpx;
        height: 156rpx;
        flex-direction: column;
        justify-content: center;
        flex-shrink: 0;
        margin: 0 auto;
        color: #333;
        text-align: justify;
        font-family: "Microsoft YaHei UI";
        font-size: 32rpx;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 0.32px;
      }

      .popupEmil-btn {
        width: 440rpx;
        margin: 0 auto;
        padding-top: 40rpx;

        view {
          width: 202rpx;
          height: 80rpx;
          flex-shrink: 0;
          border-radius: 5px;
          border: 1px solid #5DB175;
          background-color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #5DB175;
          font-family: ABeeZee;
          font-size: 32rpx;
          font-style: normal;
          font-weight: 400;
          line-height: normal;

          &:nth-child(2) {
            background-color: #5DB175;
            color: #fff;
          }
        }
      }
    }
  }

  // 弹出层 end
</style>